<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/cookie.js"></script>
    <style>
     label{
         margin:5px;
     }
     input{
        margin:5px;
     }
    </style>
</head>
<body>
    <div>
        <h3>cookie 模拟单用户注册 </h3>
        <div class="form">
            <div>
                <label for="user">用户名</label>
                <input type="text" id="user" placeholder="请输入用户名">
            </div>
            <div>
                <label for="phone">手机号码</label>
                <input type="text" id="phone" placeholder="请输入手机号码">
            </div>
            <div>
                <label for="pass">密码</label>
                <input type="password" id="pass" placeholder="请输入密码">
            </div>
            <div>
                <label for="email">邮箱</label>
                <input type="text" id="email" placeholder="请输入邮箱">
            </div>
            <div>
                <button id="savebtn" >注册</button>
            </div>
        </div>
    </div>

    <script>
        // 1 cookie 当做服务器  实现简单的cookie 增删改查   
        // 模拟一下 注册和登录 

        // 单用户注册   一台浏览器只能注册一个用户  后面注册会把之前注册的给覆盖掉 
        // 注册  只是把数据存储到 cookie  (cookie 存储)
        // 登录  用户输入用户名和密码 去cookie 里面匹配对应的用户名和密码
        
        // 如果一致   登录成功
        // 如果不一样  就登录失败  用户名或者密码错误 


        // 晚上  作业 实现多用户注册  + 登录 
        var userInp = document.getElementById("user")
        var phoneInp = document.getElementById("phone")
        var passInp = document.getElementById("pass")
        var emailInp = document.getElementById("email")
        var savebtn = document.getElementById("savebtn")

        savebtn.onclick = function(){
            var user = userInp.value
            var phone = phoneInp.value
            var pass  = passInp.value 
            var email = emailInp.value 

            // 正则   
            if(user&&phone&&pass&&email){
                setCookie('user',user,7)
                setCookie('phone',phone,7)
                setCookie('pass',pass,7)
                setCookie('email',email,7)
                location.href = './10cookie模拟单登录.html'    // 注册成功 跳转登录 
            }else{
                alert("请先完成所有的信息填写 ")
            }
        }

        
    </script>
</body>
</html>